import { NavBar, DatePicker } from "antd-mobile";
import "./index.scss";

import { useEffect, useMemo, useState } from "react";

import * as dayjs from "dayjs";
import classNames from "classnames";
import { useSelector } from "react-redux";
import _ from "lodash";

// import DailyBill from "@/pages/Month/components/Daily/index"
import DailyBill from "@/pages/Month/components/DailyBill/index.js";
const Month = () => {
  const { billList } = useSelector((state) => state.bill);

  const [dateVisible, SetDateVisible] = useState(false);

  const [curDay, setCurDay] = useState(dayjs());

  //日期确认
  function confirm(val) {
    SetDateVisible(false);
    // console.log(val);
    setCurDay(dayjs(val));
    setCurYearList(billGroupByYear[dayjs(val).format("YYYY")]);
  }

  //根据年份分组
  const billGroupByYear = useMemo(() => {
    return (
      billList &&
      _.groupBy(billList, (item) => {
        return dayjs(item.date).format("YYYY");
      })
    );
  }, [billList]);

  //当前年份账单
  const [curYearList, setCurYearList] = useState([]);

  //初始化当前年份账单
  useEffect(() => {
    let date = dayjs().format("YYYY");
    if (billGroupByYear) {
      return setCurYearList(billGroupByYear[date]);
    }
  }, [billGroupByYear]);

  const yearCost = useMemo(() => {
    let income =
    curYearList &&
    curYearList.reduce((pre, cur) => {
        if (cur.type === "income") {
          return pre + Number(cur.money);
        }
        return pre; //必须得return出去
      }, 0);
    let pay =
    curYearList &&
    curYearList.reduce((pre, cur) => {
        if (cur.type === "pay") {
          return pre + Number(cur.money);
        }
        return pre;
      }, 0);
    let total = Number(income + pay);
    return {
        income: isNaN(income) ? 0 : income,
        pay: isNaN(pay) ? 0 : pay,
        total: isNaN(total) ? 0 : total
      };
  }, [curYearList]);
//   console.log("curMonthList", curMonthList);

  //按照月分组
  const billGroupByMonth = useMemo(() => {
    return (
        curYearList &&
      _.groupBy(curYearList, (item) => {
        return dayjs(item.date).format("YYYY-MM");
      })
    );
  }, [curYearList]);

//   console.log("billGroupByDay", billGroupByDay);
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        年度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date">
            <span className="text" onClick={() => SetDateVisible(true)}>
              {/* {curYear} | {curMonth}月账单 */}
              {dayjs(curDay).year()}年账单
            </span>
            <span
              className={classNames("arrow", dateVisible && "expand")}
            ></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{Math.abs(yearCost.pay).toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{yearCost.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{Number(yearCost.total).toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>

          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="year"
            visible={dateVisible}
            max={new Date()}
            onClose={() => {
              SetDateVisible(false);
            }}
            onConfirm={(val) => {
              confirm(val);
            }}
          />
        </div>
        {/* 每日账单 */}
        {billGroupByMonth &&
          Object.keys(billGroupByMonth)?.length > 0 &&
          Object.keys(billGroupByMonth).map((day, index) => (
            <DailyBill key={index} bills={billGroupByMonth[day]} day={day} type="month"/>
          ))}
      </div>
    </div>
  );
};

export default Month;
